<!DOCTYPE html>
<html>

<head>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title></title>

    <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
    <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/channel.css?v=4.1.0" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <style>
    </style>

</head>

<body class="white-bg" style="padding: 3px;">
<div class="page-heade">
    <h2 class="title_color text-center">新增 网点拜访线路</h2>
</div>
<form action="" class="form-inline" id="form1">
    <table class="table table-bordered bud_hei text-right">
        <tr>
            <td style="width: 140px;">线路编号 <span class="colorRed">*</span>：</td>
            <td class="text-left">
                <input type="text" name="xlbh" class="form-control">(不允许重复)
            </td>
        </tr>
        <tr>
            <td style="width: 140px;">线路名称 <span class="colorRed">*</span>：</td>
            <td class="text-left">
                <input type="text" name="xlmc" class="form-control">(不允许重复)
            </td>
        </tr>
        <tr>
            <td>所属城市 <span class="colorRed">*</span>:</td>
            <td class="text-left">
                <div>
                    <div class="form-group">
                        <div class="input-group">
                            <input id="sscs" type="text" placeholder="请输入关键字或空格查询"
                                   class="form-control" value="" style="min-width: 300px;width: 300px">
                            <div class="input-group-btn">
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <a href="javascript:;" id="select_city" class="btn btn-primary btn-sm">选择</a>
                </div>
                <div class="duoxuan" style="clear:both;">

                </div>
            </td>
        </tr>
        <tr>
            <td class="text-right">拜访网点 <span class="colorRed">*</span>：</td>
            <td class="text-left">
                <div>
                <div class="form-group">
                    <div class="input-group">
                        <input id="bfwd" type="text" placeholder="请输入关键字或空格查询"
                               class="form-control" value="" style="min-width: 300px;width: 300px">
                        <div class="input-group-btn">
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
                <a href="javascript:;" id="select_net" class="btn btn-primary btn-sm">选择</a>
                </div>
                <div class="duoxuan" style="clear:both">

                </div>
            </td>
        </tr>
        <tr>
            <td class="text-right">相关人员 <span class="colorRed">*</span>：</td>
            <td class="text-left">
                <div>
                <div class="form-group">
                    <div class="input-group">
                        <input id="xgry" type="text" placeholder="请输入关键字或空格查询"
                               class="form-control" value="" style="min-width: 300px;width: 300px">
                        <div class="input-group-btn">
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
                <a href="javascript:;" id="select_xgry" class="btn btn-primary btn-sm">选择</a>
                </div>
                <div class="duoxuan" style="clear:both">

                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 140px;">线路备注 <span class="colorRed">*</span>：</td>
            <td class="text-left">
                <input type="text" name="xlbz" class="form-control" style="width: 60%">
            </td>
        </tr>
        <tr>
            <td colspan="2" class="text-center">
                <button class="btn btn-sm btn-success" type="button" id="baocun">保存</button>
                <span class="lr_5"></span>
                <button class="btn btn-sm btn-warning" id="fanhui">返回</button>
            </td>
        </tr>
    </table>
</form>


<!-- 全局js -->
<script src="__STATIC__/layout/js/jquery.min.js"></script>
<script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Sweet alert -->
<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
<script>
    $(function () {
        //保存
        $('#baocun').on('click',function () {
            var param = $(this).closest('form').serialize()
            $.post('{:url("addline")}',param,function (data) {
                if(data.success){

                    swal({title:data.msg},function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name))
                    })
                }else{
                    swal('',data.msg,'error')
                }

            },'json')
            return false
        })

        //相关人员
        $("#xgry").bsSuggest({
            url:"{:url('Bs/employee')}",
            effectiveFields: ["id", "title"],
            searchFields: [ "title"],
            effectiveFieldsAlias: {title: "名称"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
            $(this).val('')
            var bool = false
            $(this).closest('tr').find('.duoxuan .ren').each(function (idx, o) {
                if ($(this).data('id') == keyword.id) {
                    bool = true;
                }
            })
            if (bool == false)
                $(this).closest('tr').find('.duoxuan').append('<span class="ren" data-id="' + keyword.id + '">' + keyword.key + '<input type="hidden" name="xgry[]" value="' + keyword.id + '"><span class="close">×</span></span>')
            //console.log('onSetSelectValue: ', keyword, data);
        }).on('onUnsetSelectValue', function () {
            console.log("onUnsetSelectValue");
        });
        //拜访网点
        $("#bfwd").bsSuggest({
            url:"{:url('Bs/net')}",
            effectiveFields: ["id", "title"],
            searchFields: [ "title"],
            effectiveFieldsAlias: {title: "名称"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
            $(this).val('')
            var bool = false
            $(this).closest('tr').find('.duoxuan .ren').each(function (idx, o) {
                if ($(this).data('id') == keyword.id) {
                    bool = true;
                }
            })
            if (bool == false)
                $(this).closest('tr').find('.duoxuan').append('<span class="ren" data-id="' + keyword.id + '">' + keyword.key + '<input type="hidden" name="bfwd[]" value="' + keyword.id + '"><span class="close">×</span></span>')
            //console.log('onSetSelectValue: ', keyword, data);
        }).on('onUnsetSelectValue', function () {
            console.log("onUnsetSelectValue");
        });
        //弹出选择网点框
        $('#select_net').on('click',function () {
            var _this = this
            var index = layer.getFrameIndex(window.name)
            layer.open({
                type:2,
                area:['60%','60%'],
                maxmin:true,
                btn:'确定',
                btnAlign:'c',
                content:'{:url("open/net")}',
                yes:function (i,o) {
                    var a = $(o).find('iframe').contents()
                    var data = a.find('#data')
                    data = data.val()
                    data = JSON.parse(data)
                    var bool = false
                    for(var j=0;j<data.length;j++){
                        $(_this).closest('tr').find('.duoxuan .ren').each(function (idx, o) {
                            if ($(this).data('id') == data[j].id) {
                                bool = true;
                            }
                        })
                        if (bool == false)
                            $(_this).closest('tr').find('.duoxuan').append('<span class="ren" data-id="' + data[j].id + '">' + data[j].title + '<input type="hidden" name="bfwd[]" value="' + data[j].id + '"><span class="close">×</span></span>')
                    }
                    layer.close(i)
                }
            })
            return  false
        })

        //弹出选择相关人员
        $('#select_xgry').on('click',function () {
            var _this = this
            var index = layer.getFrameIndex(window.name)
            layer.open({
                type:2,
                area:['60%','60%'],
                maxmin:true,
                btn:'确定',
                btnAlign:'c',
                content:'{:url("open/employee")}',
                yes:function (i,o) {
                    var a = $(o).find('iframe').contents()
                    var data = a.find('#data')
                    data = data.val()
                    data = JSON.parse(data)
                    var bool = false
                    for(var j=0;j<data.length;j++){
                        $(_this).closest('tr').find('.duoxuan .ren').each(function (idx, o) {
                            if ($(this).data('id') == data[j].id) {
                                bool = true;
                            }
                        })
                        if (bool == false)
                            $(_this).closest('tr').find('.duoxuan').append('<span class="ren" data-id="' + data[j].id + '">' + data[j].title + '<input type="hidden" name="xgry[]" value="' + data[j].id + '"><span class="close">×</span></span>')
                    }
                    layer.close(i)
                }
            })
            return  false
        })

        $('body').on('click', 'input[type=text]', function () {
            this.select()
        })
        $('#fanhui').on('click', function () {
            parent.location.reload();
            return false
        })

        $("#sscs").bsSuggest({
            url:"{:url('Bs/city')}",
            effectiveFields: ["id", "title"],
            searchFields: [ "title"],
            effectiveFieldsAlias: {title: "名称"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
            $(this).val('')
            var bool = false
            $(this).closest('tr').find('.duoxuan .ren').each(function (idx, o) {
                if ($(this).data('id') == keyword.id) {
                    bool = true;
                }
            })
            if (bool == false)
                $(this).closest('tr').find('.duoxuan').append('<span class="ren" data-id="' + keyword.id + '">' + keyword.key + '<input type="hidden" name="sscs[]" value="' + keyword.id + '"><span class="close">×</span></span>')
            //console.log('onSetSelectValue: ', keyword, data);
        }).on('onUnsetSelectValue', function () {
            console.log("onUnsetSelectValue");
        });

        //删除单个选定
        $('body').on('click','.duoxuan .close',function () {

            $(this).closest('.ren').remove()
        })
        //选择区域
        $('#select_city').on('click',function () {

            var tmp_link = "{:url('open/city')}"
            var _this = this
            layer.open({
                type: 2,
                title: '&nbsp;',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['800px', '500px'],
                content: tmp_link,
                btn:['确定','关闭'],
                yes:function (i,o) {
                    var a = $(o).find('iframe').contents()
                    var data = a.find('#data')
                    data = data.val()
                    data = JSON.parse(data)
                    var bool = false
                    for(var j=0;j<data.length;j++){
                        $(_this).closest('tr').find('.duoxuan .ren').each(function (idx, o) {
                            if ($(this).data('id') == data[j].id) {
                                bool = true;
                            }
                        })
                        if (bool == false)
                            $(_this).closest('tr').find('.duoxuan').append('<span class="ren" data-id="' + data[j].id + '">' + data[j].title + '<input type="hidden" name="sscs[]" value="' + data[j].id + '"><span class="close">×</span></span>')
                    }
                    layer.close(i)
                }
            })
        })
    })
</script>
<script>

    var jieshou = $("#111");
    sousuo(jieshou);

    function sousuo(id) {
        id.bsSuggest({
            allowNoKeyword: false, //是否允许无关键字时请求数据
            multiWord: true, //以分隔符号分割的多关键字支持
            separator: ",", //多关键字支持时的分隔符，默认为空格
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取
            url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
            /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
            jsonp: 'cb',
            /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                var i, len, data = {
                    value: []
                };
                if (!json || !json.s || json.s.length === 0) {
                    return false;
                }

                // console.log(json);
                len = json.s.length;

                jsonStr = "{'value':[";
                for (i = 0; i < len; i++) {
                    data.value.push({
                        word: json.s[i]
                    });
                }
                data.defaults = 'baidu';

                //字符串转化为 js 对象
                return data;
            }
        });

    }
</script>
</body>

</html>